<!-- 合同弹出层 -->
<template>
	<el-dialog
		v-model="state.dialogVisible"
		width="60%"
		center
		:before-close="handleClose"
		@open="openDialog"
		:show-close="false"
    class="contract-dialog"
	>
		<template #header="{ close, titleId, titleClass }">
			<div class="my-header">
				<div :id="titleId" :class="titleClass">合同账单明细</div>
				<svg-icon icon-class="close-icon" @click="close" />
			</div>
		</template>
		<div class="establish">
			<div class="establish_item">
				<div class="label">合同总金额</div>
				<div class="content">
					<span>{{ state.titleInfo.total }}</span
					><span>元</span>
				</div>
			</div>
			<div class="establish_item">
				<div class="label">已结清总金额</div>
				<div class="content">
					<span>{{ state.titleInfo.paid }}</span
					><span>元</span>
				</div>
			</div>
			<div class="establish_item">
				<div class="label">剩余未结清总金额</div>
				<div class="content">
					<span>{{ +state.titleInfo.total - +state.titleInfo.paid }}</span
					><span>元</span>
				</div>
			</div>
		</div>
		<tableCom
			:tableHead="state.tableHead"
			:tableData="state.tableData"
			:isRadio="false"
			:height="500"
			:isSelection="false"
		>
			<template #operate>
				<el-table-column label="操作" width="200" fixed="right">
					<template #default="{ row }">
						<el-button
							size="small"
							color="#FC7018"
							style="color: #fff"
							type="primary"
							@click="toOA(row)"
							>查看资金支付审批单</el-button
						>
					</template>
				</el-table-column>
			</template>
		</tableCom>
	</el-dialog>
</template>

<script setup>
import { reactive } from "vue";
import TableCom from "@/components/table/table.vue";
import {ElDialog, ElMessage} from "element-plus";
import { contractApi } from "@/api/project";

const state = reactive({
	contractId: "", //合同ID
	titleInfo: {
		total: 0, //合同应结算金额
		paid: 0, //已支付金额
	},
	tableHead: [
		{
			label: "实付金额",
			prop: "paidAmount",
		},
		{ label: "申请付款日期", prop: "applyPayTime" },
		{ label: "资金支付审批单编号", prop: "payId" },
		{ label: "审核通过日期", prop: "auditPassTime" },
	],
	tableData: [],
	dialogVisible: false,
});

const handleClose = () => {
	state.dialogVisible = false;
};
const openDialog = () => {
	contractApi.lookContract(state.contractId || "").then((res) => {
		if (res.code == 200) {
			state.tableData = res.data.paidList;
			state.titleInfo.total = res.data.total;
			state.titleInfo.paid = res.data.paid;
		}
	});
};

/**
 * 跳转OA链接
 * @param row
 */
const toOA = (row) => {
	if(row.oaPayLink){
   return window.open(row.oaPayLink);
	}
	return ElMessage.warning('无OA调整链接,请联系OA管理员!');
}

defineExpose({
	state,
});
</script>

<style lang="scss" scoped>
.establish {
	display: flex;
	justify-content: space-between;
	.establish_item {
		display: flex;
		.label {
			width: 120px;
			line-height: 40px;
			font-size: 14px;
			font-family: SourceHanSansCN-Medium, SourceHanSansCN;
			font-weight: 700;
			color: #1a1a1a;
			text-align: right;
			margin-right: 10px;
		}
		.content {
			width: 200px;
			height: 40px;
			background: #f7f7fa;
			border-radius: 4px;
			text-align: center;
			line-height: 40px;
			span {
				font-size: 14px;
				color: #666666;
			}
		}
	}
}
.my-header {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	.el-dialog__title {
		font-size: 16px;
		font-family: SourceHanSansCN-Medium, SourceHanSansCN;
		font-weight: bold;
		color: #1a1a1a;
		line-height: 24px;
	}
	.svg-icon {
		position: absolute;
		right: 0%;
		width: 25px;
		height: 25px;
		cursor: pointer;
	}
}
</style>
